<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition :name="className">
        <component class="app-view" :is="Component"></component>
      </transition>
    </router-view>
    <music-wrapper></music-wrapper>
  </div>
</template>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
  overflow: hidden;
  position: relative;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-view {
  transition: transform 0.3s;
}

// 页面进入动画
.slide-in-enter-active {
  transform: translate(100%, 0);
  z-index: 80;
}
.slide-in-enter-to {
  transform: translate(0, 0);
}

// 页面离开动画
.slide-back-leave-active {
  transform: translate(0, 0);
  z-index: 80;
}
.slide-back-leave-to {
  transform: translate(100%, 0);
}
</style>


<script lang='ts'>
import { defineComponent, watch, ref } from "vue";
import { useCurrentInstance } from "@/utils/hooks";
import { MusicWrapper } from "@/components";

export default defineComponent({
  components: {
    MusicWrapper
  },
  setup() {
    const _this = useCurrentInstance();
    const className = ref<string>("");
    // 监听路由变化
    watch(
      () => _this.$route,
      () => {
        if ((_this.$router as any).isPush) {
          className.value = "slide-in";
        } else if ((_this.$router as any).isPush === false) {
          className.value = "slide-back";
        } else {
          className.value = "";
        }
        (_this.$router as any).isPush = false;
      }
    );
    return {
      className,
    };
  },
});
</script>

